<template>
  <div class="app-container">
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='id' width="40">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>

      <template v-for="(attr,index) in model.attrs" v-if="attr.show == true">
        <el-table-column align="center" :label='attr.describe' :width="attr.width? 95 : attr.width">
          <template slot-scope="scope">
            <div  v-if="((attr.entity == null ? scope.row[attr.name]:scope.row[attr.entity]) instanceof Object)">{{(scope.row[(attr.entity == null ? attr.name:attr.entity)])[attr.dataName]}}</div>
            <div  v-else>{{scope.row[attr.name]}}</div>
          </template>
        </el-table-column>
      </template>
      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template slot-scope="scope">
          <router-link v-for="(operation, index) in model.operations" :key="operation.url" :to="formatRouter(operation.url, scope.row.id)"><i :class="operation.class" :title="operation.title">{{operation.text}}</i></router-link>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination :total="totalElements" :display="size" :currentPage='current' @pagechange="fetchData"></v-pagination>
  </div>
</template>

<script>
  import { getList } from '@/api/rest-api'
  import pagination from '@/components/Pagination/index'

  export default {
    data() {
      return {
        list: null,
        listLoading: true,

        totalElements: 0,
        size: 10,
        current: 1,
        listQuery: {}
      }
    },
    props: {
      model: {
        type: Object,
        default: {
          attrs: []
        }
      },
      query: {
        type: Object,
        default: {}
      }
    },
    watch: {
      $route: {
        deep: false,
        handler(val) {
          location.reload()
        }
      }
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    created() {
      if (!this.model.operations) {
        this.model.operations = [
          {
            url: '#{router}/edit?id=#{id}',
            class: 'el-icon-time',
            text: '',
            title: '编辑'
          }
        ]
      }
      this.listQuery = this.query
      this.fetchData()
    },
    methods: {
      fetchData() {
        debugger
        this.listLoading = true
        getList(this.model.apiUrlHeader, this.listQuery).then(response => {
          this.list = response.data
          this.listLoading = false
        })
      },
      formatRouter(str, id) {
        str = str.replace(new RegExp('#{router}', 'g'), this.model.router)
        str = str.replace(new RegExp('#{id}', 'g'), id)
        return str
      }
    },
    components: {
      'v-pagination': pagination
    }
  }
</script>
